import { THEME_CUS } from "./mapStyle.js";
import { PolygonStyle, PolygonStyle3D, AreaMapData } from "./areaMapData.js";

const getCurrentData = function (area) {
  let coordinates = [];
  if (Array.isArray(area) && area.length > 0) {
    coordinates = area.map((item) => {
      const arrayStr = JSON.parse(item.lonlats);
      const centerPoint = JSON.parse(item.centerPoint);
      const ps = arrayStr[0]
        .split(";")
        .map((p) => p.split(",").map((pN) => Number(pN)));
      return {
        id: item.fenceId,
        name: item.fenceName ? item.fenceName : "",
        coordinates: ps,
        centerPoint,
      };
    });
  } else {
    coordinates = AreaMapData.features.map((item) => {
      return {
        name: item.properties.name || "",
        coordinates: item.geometry.coordinates[0],
      };
    });
  }

  return coordinates;
};

const formatName = function (name) {
  const flag = "物流园|物流港|物流城|科技园|物流产业".split("|");
  if (name) {
    for (let i = 0; i < flag.length; i++) {
      const element = flag[i];
      if (name.indexOf(element) != -1) {
        return name.replace(element, "<div>" + element + "</div>");
      }
    }

    return name; //.replace(/物流园|物流港|物流城|科技园|物流产业/g, "\n物流园\n");
  }
  return "";
};

export const createArea = function (
  map,
  options = { is3D: false, area: [], callback: undefined }
) {
  // const BMap = options.is3D ? window.BMapGL : window.BMap;
  const BMap = window.BMapGL;
  let data = getCurrentData(options.area);

  let paths = [];
  data.forEach((item) => {
    if (Array.isArray(item.coordinates) && item.coordinates.length > 1) {
      // 多边形 判断数据是否为多条
      paths = item.coordinates.map((p) => new BMap.Point(p[0], p[1]));
      //   const polyline = new BMap.Polyline(paths, PolygonStyle);
      //   map.addOverlay(polyline);
      if (item.name) {
        const center = item.centerPoint
          ? new BMap.Point(item.centerPoint.lng, item.centerPoint.lat)
          : paths[0];
        const offset = item.centerPoint
          ? new BMap.Size(-30, -20)
          : new BMap.Size(0, 0);
        const label = new BMap.Label(formatName(item.name), {
          // 创建文本标注
          position: center, // 设置标注的地理位置
          offset: offset, // 设置标注的偏移量
        });
        map.addOverlay(label);
        label.setStyle({
          // 设置label的样式
          color: "#DDD",
          backgroundColor: "rgba(255, 255, 255, 0)",
          fontSize: "12px",
          border: "0px solid #1E90FF",
        });
        label.addEventListener("click", function (e) {
          options.callback && options.callback(item, e);
        });

        if (options.is3D) {
          let prism = new BMap.Prism(paths, 30, PolygonStyle3D);
          map.addOverlay(prism);
        } else {
          const polygon = new BMap.Polygon(paths, PolygonStyle);
          map.addOverlay(polygon);
        }
      }
    }
  });
};

export const initMap = function (options = { is3D: false }) {
  //1、 基本配置
  // const BMap = options.is3D ? window.BMapGL : window.BMap;
  const BMap = window.BMapGL;
  //实例化，并设置最大最小缩放层级
  const map = new BMap.Map("areaMap", {
    minZoom: 14,
    maxZoom: 17,
  });
  var point = new BMap.Point(118.247951, 35.125101);
  // map.centerAndZoom(point, 18);

  // if (!options.is3D) {
  //   map.addControl(
  //     new BMap.NavigationControl({
  //       anchor: BMAP_ANCHOR_TOP_RIGHT, //控件的停靠位置
  //       type: BMAP_NAVIGATION_CONTROL_ZOOM,
  //     })
  //   );
  //   map.addControl(new BMap.ScaleControl());
  //   // map.addControl(new BMap.OverviewMapControl());
  //   // map.addControl(new BMap.MapTypeControl());
  // }

  //设置中心点、默认缩放层级
  // map.centerAndZoom(new BMap.Point(120.08469, 30.301904), 15);
  // [3d]
  //   const BMap = window.BMapGL;

  //   var point = new BMap.Point(118.239758, 35.12457);
  //   var map = new BMap.Map("areaMap", {
  //     minZoom: 14,
  //     maxZoom: 17,
  //   });
  map.centerAndZoom(point, 16);
  //   map.enableScrollWheelZoom(true);

  //清楚覆盖物
  map.clearOverlays();
  //可以鼠标缩放
  map.enableScrollWheelZoom(false);

  //   const icon = new BMap.Icon("/images/car12.png", new BMap.Size(32, 32)); //生成点标注
  //   const marker = new BMap.Marker(point, { icon: icon });
  //   // const marker = new BMap.Marker(point);
  //   map.addOverlay(marker);

  //2、 设置 默认主题 和 自定义主题
  // 默认主题 normal blueSky  light  dark  googlelite  grassgreen  midnight  pink  bluish  grayscale
  // 还有几个默认主题，但是发现并不好使 // midnight
  //   map.setMapStyle({
  //     style: "midnight",
  //   });

  // 自定义主题， http://lbsyun.baidu.com/custom/  自定义，完事导出json配置
  //   [3d]
  map.setMapStyleV2({
    // styleId: "fc7e66e861e76b275f12126e527cee39",
    styleJson: THEME_CUS,
  });
  if (options.is3D) {
    map.setHeading(44.5);
    map.setTilt(50);
    // } else {
    //   map.setMapStyle({
    //     styleJson: THEME_CUS,
    //   });
  }

  window.areaMap = map;
  return map;
};
